<template lang="html">
  <section>
    <el-form :inline='true' class="forms" label-position='right' label-width="100px">
      <el-form-item
        class='forms_item'
        :label='item.label + ":"'
        v-for='item in formData'
        :key='item.label'
      >
      <!-- input -->
        <el-input
          v-if='item.type === "input"'
          v-model='item.modelData'
          type = ''
          placeholder='请输入'
          style='width : 160px'
          clearable
          size='mini'
        ></el-input>
        <!-- select -->
        <el-select
          size='mini'
          v-else-if='item.type === "select"'
          v-model='item.modelData'
          style='width : 160px'
          clearable
        >
          <el-option
            v-for='elem in item.options'
            :value='elem.code'
            :key='elem.code'
            :label='elem.label'
          ></el-option>
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-else-if='item.type ==="date"'
          v-model="item.modelData"
          value-format='yyyy-MM-dd'
          align="right"
          type="date"
          size='mini'
          style='width:160px;'
          placeholder="选择日期"
          >
        </el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
         v-else-if="item.type === 'daterange'"
         v-model="item.modelData"
         size='mini'
         style='width:240px;'
         type="daterange"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         value-format='yyyy-MM-dd'
         >
       </el-date-picker>
      </el-form-item>
      <!--添加项-->
       <transition-group name="el-fade-in-linear">
		      <div v-show="show" class="add_input" v-for = "(item ,index) in inputs" :key = "index">
		      	<!--活动时间-->
					  <el-form-item :label='"活动时间 " + Number(index + 1)'>
					    <el-col :span="11">
					      <el-date-picker type="date" placeholder="选择日期" v-model="date1Data[index]" style="width: 100%;"></el-date-picker>
					    </el-col>
					    <el-col class="line" :span="2">&nbsp;-</el-col>
					    <el-col :span="11">
					      <el-time-picker type="fixed-time" placeholder="选择时间" v-model="date2Data[index]" style="width: 100%;"></el-time-picker>
					    </el-col>
					  </el-form-item>
					  <!--活动名称-->
			      <el-form-item label="活动名称" label-width="80px">
					    <el-input size="medium"  clearable v-model="inputData[index]"></el-input>
					  </el-form-item>
					  <el-button type="danger" @click="DelActivity(index)" icon="el-icon-delete" class = "del_button" circle></el-button>
		      </div>
      </transition-group>
      <!--添加项结束-->
      <div class="button">
        <el-button
          type='primary'
          size="small"
        >立案号提取</el-button>
        <el-button
          type='primary'
          size="small"
        >搜索</el-button>
        <el-button
          type='danger'
          size='small'
        >清空</el-button>
        <el-button @click ='addActivity'
          type='primary'
          plain
          size='small'
        >添加</el-button>
      </div>
      
    </el-form>
  </section>
</template>

<script>
export default {
  props : {
    formData : Array,
  },
  data(){
    return {
    	inputs:[],
    	inputData:[],/*v-model变量储存*/
    	date1Data:[],
    	date2Data:[],
    	show:true,
    	fontSize : 14,
    }
  },
  methods:{
  	addActivity(){/*增加活动*/
			let act_time = {};
  		this.inputs.push(act_time);
  	},
  	DelActivity(index){/*删除活动*/
  		 this.inputs.splice(index,1);
  		 this.inputData.splice(index,1);
  		 this.date1Data.splice(index,1);
  		 this.date2Data.splice(index,1);
  	},
  	scaleFont(index){/*调整字体*/
			if(this.fontSize>=12){
				index.style.fontSize=this.fontSize--+'px';
  			if(index.offsetHeight>40){this.scaleFont(index)}/*利用递归去调整字体大小*/
			}
  	}
  },
  mounted(){/*检索*/
  		let label = document.getElementsByClassName("el-form-item__label");
  		for(let i = 0;i<label.length;i++){
  			if(label[i].offsetHeight>40){this.fontSize=14;this.scaleFont(label[i])}
  		}
  },
  
  
}
</script>

<style lang="scss" scoped>
	.del_button{
		padding: 5px !important;
		margin-top: 7px;
	}
	[class*=el-col-]{
		text-align: center;
	}
  .forms {
    width: 100%;
    padding: 0 12px;
    .forms_item {
      margin-bottom: 20px;
    }
  }
  .button {
    width: 230px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .el-date-editor,.el-input,.el-select  {
  	width: 180px !important;
  }
  
</style>
